import { ConfigProvider, FloatButton } from 'antd';
import { useState } from 'react';

import light from '@/components/GlobalConfig/theme/light';
import SwitchLang from '@/components/GlobalHeader/components/SwitchLang';

import ActiveSlider from './components/ActiveSlider';
import Login from './components/Login';
import Register from './components/Register';
import styles from './index.module.scss';

const Auth = () => {
  const [activeStatus, setActiveStatus] = useState<'signIn' | 'signUp'>('signIn'); // 用于切换激活状态

  const switchActiveStatus = () => {
    setActiveStatus(activeStatus === 'signIn' ? 'signUp' : 'signIn');
  };

  return (
    <ConfigProvider theme={light}>
      <div className={styles.authContainer}>
        <div className="authCard">
          <Register switchActiveStatus={switchActiveStatus} />
          <Login />
          <ActiveSlider activeStatus={activeStatus} switchActiveStatus={switchActiveStatus} />
        </div>
        <FloatButton icon={<SwitchLang style={{ width: 20, height: 20 }} />} />
      </div>
    </ConfigProvider>
  );
};

export default Auth;
